<template>
    <view class="white-block">
        <picker :value="index" :range="range" @change="handleChange">
            <view class="block-item with-arrow">
                <view class="block-item-label">月起始日</view>
                <view class="block-item-content">每月{{ monthFirthDate }}日</view>
            </view>
        </picker>
        <view class="block-item">
            <view class="block-item-label">当前版本</view>
            <view class="block-item-content">1.0.0</view>
        </view>
    </view>
</template>

<script setup>
    import { ref } from 'vue'
    const monthFirthDate = ref(1);
    const range = ref([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25])
    const index = ref(0)
    const handleChange = (e) => {
        const value = e.detail.value;
        index.value = value;
        monthFirthDate.value = range.value[value];
    }
    monthFirthDate.value = uni.getStorageSync('userInfo').monthFirthDate
    index.value = range.value.indexOf(monthFirthDate.value);
</script>

<style lang="less" scoped>
    .white-block {
        margin-top: 30rpx;
        padding-top: 0;
        padding-bottom: 0;
        box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
        .block-item{
            position: relative;
            border-bottom: 1px solid #F5F5F5;
            display: flex;
            height: 100rpx;
            align-items: center;
            justify-content: space-between;
            &.with-arrow{
                padding-right: 40rpx;
                &::after{
                    content: '';
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 28rpx;
                    height: 28rpx;
                    background: url('/static/right-arrow.png') no-repeat;
                    background-size: 20rpx 28rpx;
                }
            }
            &:last-child{
                border-bottom: none;
            }
        }
    }
</style>